<div class="easyui-layout" data-options="fit:true" id="home_layout">
    <div data-options="region:'north',border:false" style="height:175px">
        <div class="theme-user-info-panel">
            <div class="left">
                <img src="${ctxPath}/common/plugin/easyui/themes/1.0.4/insdep/images/portrait86x86.png" width="86" height="86">
            </div>
            <div class="center">
                <h1>${user('xm')}<!-- <span class="color-warning badge">未认证</span> --></h1>
                <ul>
                    <li>工号:<span class="font-red">${user('gh')}</span><br>今天是&nbsp;<span class="font-red">${date(),'yyyy-MM-dd'}</span></li>
                </ul>
            </div>
            <div class="right">
                <style>
                    .gauge {
                        width: 110px;
                        height: 110px;
                    }
                </style>
                <script>
                    $(function () {

                        var gg1_option = {
                            min: 0,
                            max:${XTB.ZZ_ZS},
                            donut: true,
                            gaugeWidthScale: 0.6,
                            counter: true,
                            hideInnerShadow: true
                        };
                        var gg2_option = {
                            min: 0,
                            max:${XTB.WB_ZS},
                            donut: true,
                            gaugeWidthScale: 0.6,
                            counter: true,
                            hideInnerShadow: true
                        }
                        var gg3_option = {
                            min: 0,
                            max:${XTB.XZ_ZS},
                            donut: true,
                            gaugeWidthScale: 0.6,
                            counter: true,
                            hideInnerShadow: true
                        }
                        var gg4_option = {
                            min: 0,
                            max:${XTB.JY_ZS},
                            donut: true,
                            gaugeWidthScale: 0.6,
                            counter: true,
                            hideInnerShadow: true
                        }
                        var gg1 = new JustGage({
                            id: 'gg1',
                            defaults: gg1_option
                        });

                        var gg2 = new JustGage({
                            id: 'gg2',
                            defaults: gg2_option
                        });
                        var gg3 = new JustGage({
                            id: 'gg3',
                            defaults: gg3_option
                        });
                        var gg4 = new JustGage({
                            id: 'gg4',
                            defaults: gg4_option
                        });

                    });
                </script>
                <ul>
                    <li>
                        <div id="gg1" class="gauge" data-value="${XTB.ZZ_BYS}"></div>
                        <span>在职人数</span></li>
                    <li>
                        <div id="gg2" class="gauge" data-value="${XTB.WB_BYS}"></div>
                        <span>未办人数</span></li>
                    <li>
                        <div id="gg3" class="gauge" data-value="${XTB.XZ_BYS}"></div>
                        <span>新增人数</span></li>
                    <li>
                        <div id="gg4" class="gauge" data-value="${XTB.JY_BYS}"></div>
                        <span>减员人数</span></li>
                </ul>
            </div>
            
        </div>
    </div>
    <div data-options="region:'center',border:false,fit:true" style="height:400px;padding-top:20px">
        <div id="chart-panel" style="width:98%;height:98%"></div>
        <script>
            var option = {
                grid: {
                    left: '5%',
                    right: '0%',
                    bottom: '6%',
                    top: '10%',
                    containtLabel: true
                },
                title: {
                    text: '在职人数统计',
                    left: '48%'
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '在职人数',
                        type: 'bar',
                        data: [${ZXT.M_1}, ${ZXT.M_2}, ${ZXT.M_3}, ${ZXT.M_4}, ${ZXT.M_5}, ${ZXT.M_6}, ${ZXT.M_7}, ${ZXT.M_8}, ${ZXT.M_9}, ${ZXT.M_10}, ${ZXT.M_11}, ${ZXT.M_12}],
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                        '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                }, label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{b}\n{c}'
                                }
                            }
                        }
                    }
                ]
            };
            var myChart = echarts.init(document.getElementById('chart-panel'));
            myChart.setOption(option);
        </script>

    </div>
</div>
<div id="tab-tools">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-set'"></a>
</div>
